import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  componentDidMount() {

    // am4core.useTheme(am4themes_animated);

    // Create chart instance
    var chart = am4core.create("range01", am4charts.XYChart);
    chart.paddingBottom = 40;

    // Add data
    const data = [{
      "date": new Date(2018, 4, 20),
      "value": 90,
      "category": "M1"
    }, {
      "date": new Date(2018, 5, 1),
      "value": 102,
      "category": "M2"
    }, {
      "date": new Date(2018, 6, 10),
      "value": 65,
      "category": "M3"
    }, {
      "date": new Date(2018, 7, 23),
      "value": 62,
      "category": "M4"
    }, {
      "date": new Date(2018, 10, 1),
      "value": 55,
      "category": "M5"
    }, {
      "date": new Date(2018, 11, 30),
      "value": 81,
      "category": "M6"
    }];
    chart.data = data;

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    // dateAxis.renderer.minGridDistance = 50;
    dateAxis.renderer.grid.template.align = 'center';
    dateAxis.renderer.grid.template.valign = 'middle';
    dateAxis.renderer.grid.template.location = 0.5;
    dateAxis.renderer.opposite = true;
    dateAxis.tooltipDateFormat = "yyyy-MM-dd";
    dateAxis.dateFormats.setKey("day", "MMMM dd");

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var lineSeries = chart.series.push(new am4charts.ColumnSeries());
    lineSeries.dataFields.valueY = "value";
    lineSeries.dataFields.dateX = "date";
    lineSeries.strokeWidth = 3;
    lineSeries.dataItems.template.locations.dateX = 0.5;
    var bullet = lineSeries.bullets.push(new am4charts.CircleBullet());

    chart.cursor = new am4charts.XYCursor();

    //lineSeries.dataItems.template.locations.dateX = 0.5;

    for (var item of data) {
      var range = dateAxis.axisRanges.create();
      range.date = item.date;
      range.label.text = item.value;
      range.grid.disabled = true;
      range.label.inside = true;
      range.label.valign = "bottom";
      range.label.align = 'center'
      range.label.location = 0.5
      range.label.dy = 40;

      // range.label.tooltip = new am4core.Tooltip();
      // range.label.tooltipText = "Range:\n[bold]{date}[] to [bold][/]";
      range.label.interactionsEnabled = true;
      range.label.isMeasured = true;

      var label = range.label;

      console.log(label.tooltip);   //label.tooltip.background.stroke = am4core.color("#000");
      //label.tooltip.background.strokeOpacity = 1;
      //label.tooltip.fill = am4core.color("#000");
      //label.tooltip.background.fill = am4core.color("#fff");

      // 创建一个刻度线
      let tick = dateAxis.axisRanges.create();
      tick.date = item.date;
      tick.bullet = new am4core.Rectangle()
      tick.bullet.width = 0.5
      tick.bullet.height = 5
      tick.bullet.fill = am4core.color("#000")
      tick.label.inside = true;
      tick.label.valign = "bottom";
      tick.label.location = 0.5
      tick.label.dy = 40;
    }

  }
  render() {
    return (
      <div id='range01'></div>
    )
  }
}